CS 211 Lesson 30

GUI Components

Quote:

"I don't know whether this is the best of times or the worst of times, but I assure you it's the only time you've got." Art Buchwald

Lesson Objectives:

• Be able to share values between callback functions

• Be able to initialize GUI state

• Be able to get and set GUI object property values under program control

• Be able to use a variety of GUI components

• Understand the purpose of panels and button groups

Lesson:

I. MATLAB Concepts

A. Storing data within a GUI

• A computer program with a Graphical User Interface (GUI) is, by definition, an event-driven program. A GUI program responds to user events in the order the events are generated by a user.

• An event-driven program is typically created using callback functions. A callback function is a function that is associated with a specific event and is called by a driver program when that event occurs. The driver program is typically "hidden" from the programmer. In addition, the driver program has a standard way it calls all callback functions. Therefore a programmer cannot specify or change the arguments sent to a callback function. So how is data exchanged between functions? There are three standard methods:
   

• Method 1: Use the handles structure that is passed to every callback function.

  • The handles structure initially contains fields that correspond to the Tag property of each graphic component in your GUI.

  • The handles structure is initialized in the *_OpeningFcn function and is passed to all callback functions.

  • Your program may add additional fields and/or remove fields from the handles structure in any callback function.

  • If a function changes the handles structure, it must call guidata(hObject, handles) to update the original copy of the structure. (Remember that all functions that receive arguments are manipulating a copy of the original argument sent to the function.)
     

• Method 2: Use global variables

  • For efficiency, very large data structures should be saved as global variables. (This eliminates the need to pass a copy of the large data structure every time a callback function is called.)

  • Each callback function that uses a global variable must declare that variable as global.

  • A persistent variable may be used to save a value between calls of a single callback function.
     

• Method 3: Use the property fields of the graphic components

  • For example, for Lab 29, the "count" value stored in the 'String' property of a static text object.

  • Application data must be consistent with the type of data the property represents. For example, the 'Position' property of a figure should be a 4-element vector. You cannot put arbitrary data into an object's properties.

B. Initializing a GUI program

• When a GUI program is executed, the *_OpeningFcn() function is always called before the GUI window is displayed.

• Place your GUI initialization code in the *_OpeningFcn() function between the following GUIDE-generated lines:

handles.output = hObject;

% put your GUI initialization code here

guidata(hObject, handles):

• The call to guidata() updates the handles structure to include initializations your code may make.

• Initialization code may be used to read in a data set from a file, customize the GUI, perform initial computations, etc.

C. Getting and setting GUI object properties

• Use the get(handle, 'PropertyName') function to retrieve property values (such as user inputs) from GUI components. For example, to get the value of a slider component with a tag name of Temperature, use the following code:

User_selected_value = get(handles.Temperature, 'Value');

• Use the set(handle, 'PropertyName', value) function to set a property value of a GUI component. For example, to set the minimum range of a slider with a tag name of Temperature to 0, use the following code:

set(handles.Temperature, 'Min', 0)

• Note that you do not need to call guidata() to update handles if you do not change one of if its field values.

D. Key properties of GUI Components

• All graphic components have a set of properties. The number and type of properties varies with each type of object.

• The most important properties for User Interface (UI) graphic components are shown in the table below:

Component type	Property	Description
static text	'Style' 'String'	'text' the displayed text
edit box	'Style' 'String' 'Min' 'Max'	'edit' the text that a user enters into the edit box the minimum number of lines of text the user can enter the maximum number of lines of text the user can enter
push button	'Style' 'String'	'pushbutton' the text on the button
toggle button	'Style' 'Value'	'togglebutton is set to the value of Max (1 by default) when the button is on is set to the value of Min (0 by default) when the button is off
check box	'Style' 'Value'	'checkbox' is set to the value of Max (1 by default) when the box is checked is set to the value of Min (0 by default) when the box is unchecked
radio button	'Style' 'Value'	'radiobutton' is set to the value of Max (1 by default) when the button is selected (has a dot in it) is set to the value of Min (0 by default) when the button is not selected
popup menu	'Style' 'String' 'Value'	'popupmenu' a cell array of strings, one for each menu option a scalar set to the number of the user selected menu option
list box	'Style' 'String' 'Value' 'SelectionType' 'SelectionType'	'listbox' is a cell array of strings, one for each line in the list box is a vector containing the numbers of the user-selected lines is set to 'normal' if the user single clicks in a list box is set to 'open' if the user double clicks in a list box
slider	'Style' 'Value' 'Min' 'Max' 'SliderStep'	'slider' is set to a value corresponding to the user-selected slider position the minimum slider value the maximum slider value a 2-element row vector that determines how much the slider moves (the first element value is the percentage of slider movement when the user clicks an arrow button; the second element value is the percentage of slider movement when the user clicks in the slider trough which is right or left of the slider button position).

E. Panels and Button Groups

• A GUI panel is a container for GUI components and is represented by an uipanel object.

• Unlike a figure object (which is also a container), a panel has no title bar and no attached menus.

• Panel objects are useful for grouping and labeling a related set of GUI components.

• Moving a panel moves all of its contained GUI objects.

• Some of the important properties of a uipanel object are:

  • 'BorderType' - One of 'none', 'etchedin', 'etchedout', 'beveledin', 'beledout', or 'line'

  • 'BorderWidth' - Width of the border

  • 'Title' - Title string

  • 'TitlePosition' - One of 'lefttop', 'centertop', 'righttop', 'leftbottom', 'centerbottom', 'rightbottom'
     

• The standard behavior for a group of related radio buttons is to have only one radio button in the group "active" at one time. If a user selects one radio button, all other radio buttons in the group should become "inactive." One way to accomplish this is to have each callback function for each radio button deselect all of the other radio buttons in the group and then activate the one selected.

• A good GUI design places a group of related radio buttons inside a uipanel object titled with an appropriate group label.

• Study the example GUI design Radio_button_demo.fig and code Radio_button_demo.m. The program is shown in the figure below.

II. Good Programming Practices

• (none for this lesson)

III. Algorithms

• (none for this lesson)

Lab Work: Lab 30

References:  Chapman Textbook: section 10.2-10.5